<template>
  <view class="special-scl-box" @click="clickEmit">
    <view class="inner-box"
      :style="{
        'backgroundImage':'url(' + boxBg +')',
        'align-items': styDirect == 'right' ? 'flex-end' : 'flex-start'
      }"
    >
      <view class="row-name limit-text-single-line"
        :style="{
          'width':boxW
        }"
      >{{sclData.sclName}}</view>
      <view class="row-intro limit-text-two-line"
        :style="{
          'width':boxW
        }"
      >{{ sclData.summary }}</view>
      
      <view class="view-num-box"
        :style="{
          'left': styDirect == 'right' ? 'auto' : '0',
          'right': styDirect == 'right' ? '0' : 'auto'
        }"
      >
        <view class="col-1">
          <image class="img" :src="teamIcon" mode="widthFix"></image>
        </view>
        <view class="col-2">
          {{viewNumStr}}次
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  const defaultObj = {
    coverImg: '', // 测评封面
    sclName: '', // 测评名
    summary: '', // 简介
    newOriginalPrice: 0, //原价
    discountPrice: 0, //现价
    collectNums: 0, //测评人数
  }
  export default{
    props:{
      sclData: {
        type: Object,
        default: () => defaultObj
      },
    },
    data(){
      return {
        boxBg:this.imgBaseURL + '/scl/home/scl-box-iq.png',
        teamIcon:this.imgBaseURL + '/scl/home/team-icon-white.png',
        styDirect: 'right',
        boxW:'420rpx'
      }
    },
    watch:{
      sclData: {
        immediate: true,
        handler(val){
          if (val) {
            if(val.homeBox){
              this.styDirect = val.homeBox.boxDirect
              this.boxBg = val.homeBox.boxBg
              this.boxW = val.homeBox.boxW
            }
          }
        }
      }
    },
    computed:{
      viewNumStr() {
        //大于1万则显示1w，例子：1.2w
        if (this.sclData?.collectNums > 10000) {
          return `${(this.sclData?.collectNums / 10000).toFixed(1)}w`
        } else {
          return this.sclData?.collectNums
        }
      }
    },
    methods: {
      clickEmit() {
        this.$emit('clickBox')
      }
    },
  }
</script>

<style lang="scss" scoped>
  .special-scl-box{
    width: 720rpx;
    height: 210rpx;
    position: relative;
    background-color: #fff;
    margin: auto;
    
    .inner-box{
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding-left: 18rpx;
      padding-right: 18rpx;
      padding-top: 50rpx;
      
      display: flex;
      flex-direction: column;
      
      .row-name{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;
        width: 420rpx;
      }
      
      .row-intro{
        width: 420rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 26rpx;
        color: #333333;
        line-height: 34rpx;
        text-align: justify;
        font-style: normal;
      }
      
      .view-num-box{
        display: flex;
        padding: 6rpx 16rpx;

        background: rgba(172, 171, 170, .32);
        border-radius: 24rpx 0rpx 24rpx 0rpx;
        width: fit-content;
        position: absolute;
        bottom: 0;
        // left: 0;
        
        .col-1{
          width: 32rpx;
          height: 32rpx;
          margin-right: 4rpx;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
        .col-2{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }

      
    }
  }
</style>